﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Front.Master" AutoEventWireup="true" CodeBehind="Gallery.aspx.cs" Inherits="CarService.Gallery" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script type="text/javascript">
        function LoadDiv(url) {
            var img = new Image();
            var bcgDiv = document.getElementById("divBackground");
            var imgDiv = document.getElementById("divImage");
            var imgFull = document.getElementById("imgFull");
            var imgLoader = document.getElementById("imgLoader");

            imgLoader.style.display = "block";
            img.onload = function () {
                imgFull.src = img.src;
                imgFull.style.display = "block";
                imgLoader.style.display = "none";
            };
            img.src = url;
            var width = document.body.clientWidth;
            if (document.body.clientHeight > document.body.scrollHeight) {
                bcgDiv.style.height = document.body.clientHeight + "px";
            }
            else {
                bcgDiv.style.height = document.body.scrollHeight + "px";
            }

            imgDiv.style.left = (width - 650) / 2 + "px";
            imgDiv.style.top = "120px";
            bcgDiv.style.width = "100%";

            bcgDiv.style.display = "block";
            imgDiv.style.display = "block";
            return false;
        }
        function HideDiv() {
            var bcgDiv = document.getElementById("divBackground");
            var imgDiv = document.getElementById("divImage");
            var imgFull = document.getElementById("imgFull");
            if (bcgDiv != null) {
                bcgDiv.style.display = "none";
                imgDiv.style.display = "none";
                imgFull.style.display = "none";
            }
        }
</script>

<style type="text/css">
     body 
     {
        margin:0;
        padding:0;
        height:100%; 
        overflow-y:auto;  
     }
     .modal
     {
        display: none; 
        position: absolute;
        top: 0px; 
        left: 0px;
        background-color:black;
        z-index:100;
        opacity: 0.8;
        filter: alpha(opacity=60);
        -moz-opacity:0.8;
        min-height: 100%;
     }
     #divImage
     {
        display: none;
        z-index: 1000;
        position: fixed;
        top: 300px;
        left: 0;
        background-color:White;
        height: 550px;
        width: 700px;
        padding: 3px;
        border: solid 1px black;
     }
     * html #divImage {position:absolute;}
</style>
<!--[if lte IE 6]>
   <style type="text/css">
   /*<![CDATA[*/ 
html {overflow-x:auto; overflow-y:hidden;}
   /*]]>*/
   </style>
<![endif]-->
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div id="content-1">
        <div class="clear">&nbsp;</div>
            <div class="container_12">
            <div class="wrapper">
                <div class="grid_12">
                    <h2 class="ident-bot-2">
                        Hình ảnh Hoạt động
                    </h2>
                    <asp:Repeater ID="rptImage" runat="server">
                        <ItemTemplate>
                            <asp:ImageButton ID="imgButton" runat="server" 
                            ImageUrl='<%# Eval("ImageName")%>' Width="230px"
                            Height="170px" Style="cursor: pointer" 
                            OnClientClick = "return LoadDiv(this.src);" />
                        </ItemTemplate>
                    </asp:Repeater>
                </div>
            </div>
        <br /><br />
            </div>

            <div id="divBackground" class="modal">
</div>

        <div class="clear">&nbsp;</div>
    </div>
    <div id="divImage" class="info">
    <table style="height: 100%; width: 100%">
        <tr>
            <td valign="middle" align="center">
                <img id="imgLoader" alt=""
                 src="Styles/Img/ajax-loader.gif" />
                <img id="imgFull" alt="" src="" 
                 style="display: none;
                height: 450px;width: 600px;" />
            </td>
        </tr>
        <tr>
            <td align="center" valign="bottom">
                <input id="btnClose" type="button" style="color: #ff0000;" value="close"
                 onclick="HideDiv()"/>
            </td>
        </tr>
    </table>
</div>
</asp:Content>
